<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>密保问题</title>
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">
		<style>
			.info{width: 100%;height: 1.34rem;background: #fff;position: absolute;/*top: 0.9rem;*/left: 0;text-align: center;line-height:2.34rem;font-size: 0.28rem;}
			.question{width: 100%;height: 0.8rem;background: #fff;position: absolute;top: 1.36rem;left: 0;font-size: 0.26rem;padding:0.21rem 0.35rem 0.26rem 0.37rem;box-sizing: border-box;color: #a7a7a7;}
			.question span:last-child{float: right; color: #333333;}
			.question span b{color: #a7a7a7;}
			.answer{width: 100%;height: 0.9rem;background: #fff;position: absolute;top:2.17rem;left: 0;font-size: 0.26rem;color: #a7a7a7;padding:0.21rem 0.35rem 0.26rem 0.37rem;box-sizing: border-box;}
			.answer .mui-input-row{line-height: 21px;width: 70%;height: 0.9rem;margin-bottom: 0 !important;padding:0 !important;-webkit-user-select: text;border: none !important;position: absolute;top: 0;right: 0;outline: 0 !important;background-color: #fff;-webkit-appearance: none;}
			.answer .mui-input-row input{width: 100%;height: 100%;border: none !important;text-align: right;padding-right: 0.7rem;color: #333;font-size: 0.26rem;}
			.question2{top: 3.15rem;}
			.answer2{top: 3.97rem;}
			/*.question3{top: 6.95rem;}
			.answer3{top:7.78rem ;}*/
			.answer .mui-input-row .mui-icon-clear{font-size: 0.37rem;top: 0.27rem;right: 0.3rem;width: 0.38rem;height: 0.38rem;text-align: center; color: #cccccc;}
			.save{width: 6rem;height: 0.68rem;background: #117afd;font-size: 0.3rem;color: #fff;border: none;outline: none;position: absolute !important;top: 6.01rem  !important;left: 0.75rem !important;border-radius: 0.1rem;}
			.select-box{width: 100%;/*height: 3.71rem;*/background: #fff;position: absolute;bottom: 0;}
			.select-box ul{margin: 0 !important;padding: 0 !important;}
			.select-box ul li{border-bottom: 0.01rem solid #e7e7e7;height: 0.86rem;text-align: center;color: #265efc;line-height: 0.86rem;}
			.select-box ul li:last-child{border-bottom: none; color: #333333;}
			.select-box ul li:first-child,.select-box ul li:last-child{height: 0.95rem;line-height: 0.95rem !important;}
			.mask{display: none;}
		</style>
	</head>
	<body>
		<div  style="position: absolute; top: -1.32rem; left: 0; width: 100%;">
			<div class="question question1"><span>密保问题一</span><span id="qs1">请选择问题一<b>></b></span></div>
			<div class="answer answer1">
				<span>答案</span>	
				<div class="mui-input-row">
					<input type="text" class="mui-input-clear" id="as1">
				</div>
			</div>
			<div class="question question2"><span>密保问题二</span><span id="qs2">请选择问题二<b>></b></span></div>
			<div class="answer answer2">
				<span>答案</span>	
				<div class="mui-input-row">
					<input type="text" class="mui-input-clear" id="as2">
				</div>
			</div>			
		</div>
		<button class="save">保存</button>
		<div class="mui-backdrop mask">
			<div class="select-box">
				<ul id="quesList">
				</ul>
			</div>
		</div>
	</body>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/common.js"></script>
	<script src="../../../js/app.js" ></script>
	<script>
		var mask = document.querySelector('.mask');
		mui.plusReady(function(){
			//获取密保问题列表
			var param = {};
			param.netUserId = getUserId();
			utils.ajax('appUserInfo/questionList.do',function(data){
				var data = JSON.parse(data);
				var questionMap = data.questionMap;
				if(data.quesA != undefined && data.answA != undefined){
					document.getElementById('qs1').innerText = data.quesA;
			 		document.getElementById('as1').value = data.answA;
				}
				
				if(data.quesB != undefined && data.answB != undefined){
					document.getElementById('qs2').innerText = data.quesB;
			 		document.getElementById('as2').value = data.answB;
				}
				var ulEle = document.getElementById('quesList');
				for (var i in questionMap) {
					var liEle = createElm('li',{"class":"ques"},questionMap[i]);
					ulEle.appendChild(liEle);
				}
				var cancleEle = createElm('li',{"class":"close"},'取消');
				ulEle.appendChild(cancleEle);
			},jsonToParams(param),null,function(){
				mui.toast('抱歉，当前服务不可用，请稍后再试！');
			})
		});
		mui('ul').on('tap','.close',function(){
			mask.style.display='none';
		});
		//密保问题绑定事件
		mui('body').on('tap','.question',function(){
			mask.style.display='block';
			var pEle = this;
			//问题列表绑定事件
			mui('ul').on('tap','.ques',function(){
				var quesStr = this.innerText;
				pEle.lastChild.innerText = quesStr;
				mask.style.display = 'none';
				//取消绑定
				mui('ul').off('tap','.ques');
			});
		});
		//保存
		document.querySelector('.save').addEventListener('tap',function(){
			var q1 = document.getElementById('qs1').innerText;
			var q2 = document.getElementById('qs2').innerText;
			var a1 = document.getElementById('as1').value;
			var a2 = document.getElementById('as2').value;
			//数据验证
			if (q1 == '请选择问题一') {
				mui.toast('请选择问题一');
				return;
			}
			if (q2 == '请选择问题二') {
				mui.toast('请选择问题二');
				return;
			}
			if (a1 == '') {
				mui.toast('请输入问题一答案');
				return;
			}
			if (a2 == '') {
				mui.toast('请输入问题二答案');
				return;
			}
			var param = {};
			param.question1 = q1;
			param.question2 = q2;
			param.answer1 = a1;
			param.answer2 = a2;
			var user = getUser();
			param.netUserId = getUserId();
			utils.ajax('appUserInfo/securityQuestions.do',function(data){
				var data = JSON.parse(data);
				if (data.state == '1') {
					mui.toast('设置成功！');
					var opener = plus.webview.currentWebview().opener();
		        	mui.fire(opener, 'refresh');
					mui.back();
				} else {
					mui.toast(data.msg);
				}
			},jsonToParams(param),null,function(){
				mui.toast('抱歉，当前服务不可用，请稍后再试');
			})
		});
		
	</script>
</html>